<template>
	<!-- 我的-自提核销 -->
	<view class="MerchantVerification public">
		<view class="Write-offRecords" @click="JumpWriteOffRecords">
			核销记录
		</view>
		<view class="main">
			<view class="main-title">
				<view class="main-title-left" @click="handMovement">
					<view class="">
						<image :src="ManualInputImage" mode=""></image>
					</view>
					<view class="">
						手动输入
					</view>
				</view>
				<view class="main-title-right" @click="ScanCode">
					<view class="">
						<image :src="ScanCodeVerificationImage" mode=""></image>
					</view>
					<view class="">
						扫码核销
					</view>
				</view>
			</view>
			<view class="zi" v-if="status == 1">
				<!-- <ScanCodeVerification @ScanCode='ScanCode'></ScanCodeVerification> -->
				<view class="main-footer" @click="scanCodeFun">
					<uni-icons type="scan" size="110rpx" color="white"></uni-icons>
				</view>
			</view>
			<view class="shou" v-if="status == 0">
				<!-- <ManualInput @handMovement='handMovement'></ManualInput> -->
				<view class="main-input">
					<input type="text" placeholder="请输入核销码" v-model="verifyCode">
				</view>
				<view class="main-footer">
					<button @click="confirmOrderGoods">确认</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import ScanCodeVerification from '../../../components/my/ResidencyServices/SelfWithdrawalVerification/ScanCodeVerification.vue'
	// import ManualInput from '../../../components/my/ResidencyServices/SelfWithdrawalVerification/ManualInput.vue'
	const $api = require('@/utils/request.js').API
	export default {
		components: {
			// ScanCodeVerification,
			// ManualInput
		},
		data(){
			return {
				status:0,
				// switchStatus: 'ScanCodeVerification',
				ManualInputImage:require('../../../static/my/ResidencyServices/handwritingSelected.png'),
				ScanCodeVerificationImage:require('../../../static/my/ResidencyServices/ScanCode.png'),
				verifyCode: ''
			}
		},
		onLoad() {
			// this.writeOffRecords()
		},
		methods: {
			// 确认核销订单
			confirmOrderGoods(){
				if(!this.verifyCode) {
					uni.showToast({
						title:'输入框不能为空',
						icon:'none',
						duration:2000
					})
				} else {
					$api.postWriteOffOrderGoods({
						verify_code: this.verifyCode
					}).then(res => {
						uni.showToast({
							title: res.data.message,
							icon:'',
							duration:2000
						})
					})
				}
			},
			// 跳转核销记录
			JumpWriteOffRecords(){
				uni.navigateTo({
					url:'../../my/ResidencyServices/Write-offRecords'
				})
			},
			// 扫码核销
			ScanCode(){
				this.status = 1
				this.ScanCodeVerificationImage = require('../../../static/my/ResidencyServices/ScanCodeSelected.png')
				this.ManualInputImage = require('../../../static/my/ResidencyServices/handwriting.png')
			},
			// 手动输入
			handMovement(){
				this.status = 0
				this.ScanCodeVerificationImage = require('../../../static/my/ResidencyServices/ScanCode.png')
				this.ManualInputImage = require('../../../static/my/ResidencyServices/handwritingSelected.png')
			},
			// 扫码核销-相机
			scanCodeFun(){
				uni.scanCode({
					success: function (scanCodeRes) {
						$api.postWriteOffOrderGoods({
							verify_code: scanCodeRes.result
						}).then(res => {
							uni.showToast({
								title: res.data.message,
								icon:'',
								duration: 2000
							})
						})
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.MerchantVerification {
		font-family: PingFang SC;
		font-weight: 400;
		background: #FDFDFD;
		// 核销记录
		.Write-offRecords {
			display: flex;
			justify-content: flex-end;
			font-size: 30rpx;
			color: #F14805;
			padding: 50rpx 37rpx 32rpx 0;
		}
		// 内容
		.main {
			width: 702rpx;
			height: 741rpx;
			background: white;
			box-shadow: 0rpx 16rpx 24rpx 0rpx rgba(201,201,201,0.34);
			border-radius: 20rpx;
			margin: auto;
			.main-title {
				display: flex;
				justify-content: space-around;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				padding: 72rpx 0 103rpx 0;
				image {
					width: 78rpx;
					height: 72rpx;
				}
			}
			.zi {
				.main-footer {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 252rpx;
					height: 252rpx;
					background: #F14500;
					border-radius: 50%;
					margin: auto;
				}
			}
			.shou {
				.main-input {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 114rpx;
					input {
						width: 608rpx;
						height: 89rpx;
						text-align: center;
						border: 1px solid #D3D3D3;
						border-radius: 12rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #585757;
					}
				}
				.main-footer {
					display: flex;
					justify-content: center;
					align-items: center;
					button {
						width: 610rpx;
						height: 88rpx;
						color: white;
						background: #F14500;
						border-radius: 44rpx;
						font-size: 30rpx;
						font-weight: 500;
						line-height: 88rpx;
					}
				}
			}
		}
	}
</style>